import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Form, Table, Modal, Spin, Button, message, Tooltip, Pagination } from 'antd';
import { routerRedux } from 'dva/router';
import del1Img from '@/assets/knowledge/del1.png';
import editImg from '@/assets/knowledge/edit.png';
import RobotBtn from '@/utils/robotBtn';
import Bottword from '@/modules/Bottword.js';
import styles from './index.less';
import addShare from '@/assets/knowledge/addShare.png';

const FormItem = Form.Item;
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1131883_m18hmgbwet.js',
});
@connect(({ process, loading }) => ({
  process,
  loading: loading.effects['knowledgeBaseSharingNew/fetch'],
}))
class KnowledgeBaseSharingNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      knowledgeList: [],
      total: 0,
    };
  }

  // eslint-disable-next-line react/sort-comp
  fetche = () => {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeBaseSharingNew/fetch',
        payload: { robotId: currentUser.robotId },
        callback: res => {
          console.log('列表数据', res);
          let val = res.items;
          val.map((item, index) => (item['key'] = index));
          this.setState({
            knowledgeList: val,
            login: false,
            total: res.total,
            pageSize: 10,
            page: 1,
          });
        },
      });
    });
  };

  componentDidMount() {
    this.fetche();
  }

  handleDelete = item => {
    console.log('item', item);
    const { dispatch } = this.props;
    // window.location.href = "/knowledge/knowledgeBaseSharing/Edit?name="+item.name+'&_id='+item._id;
    dispatch(
      routerRedux.push({
        pathname: '/knowledge/knowledgeBaseSharingNew/Edit',
        params: { id: item },
      })
    );
  };

  handleDeletes = item => {
    console.log('item', item);
    Modal['confirm']({
      title: '删除任务',
      content: '确定删除吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'knowledgeBaseSharingNew/fetchd',
            payload: { sharedCategoryId: item._id },
            callback: res => {
              console.log('componentWillMount', res);
              if (res.status === true) {
                message['success']('执行成功！');
                this.fetche();
              }
              if (res.status === false) {
                message['error']('执行失败！');
              }
              this.fetche();
            },
          });
        });
      },
      onCancel() {
        console.log('onCancel');
      },
    });
  };

  onChangeA = val => {
    // 页数选择
    console.log(val);
  };

  onShowSizeChangeA = (current, pageSize) => {
    console.log('1', current, '2', pageSize);
  };

  enumeration = () => {
    // '/knowledge/antistopReply/edit'
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/knowledge/knowledgeBaseSharingNew/add',
      params: { id: 'tcx' }
    }));
    // window.location.href = '/knowledge/knowledgeBaseSharing/add';
  };

  lessdata = () => {
    const columns = [
      {
        title: '用户名',
        width: 'calc(30vw)',
        dataIndex: 'nickName',
      },
      {
        title: '用户账号',
        width: 'calc(40vw)',
        dataIndex: 'name',
      },
      {
        title: '操作',
        render: (text, item) => {
          return (
            <div className={styles.pb}>
              <img
                src={editImg}
                alt="编辑"
                style={{ marginRight: 5, cursor: 'pointer' }}
                onClick={text => {
                  this.handleDelete(item);
                }}
              />
              <img
                src={del1Img}
                alt="删除"
                style={{ marginLeft: 5, cursor: 'pointer' }}
                onClick={text => {
                  this.handleDeletes(item);
                }}
              />
            </div>
          );
        },
      },
    ];
    return (
      <Spin spinning={this.state.login}>
        <Table
          className="zdyTable"
          columns={columns}
          dataSource={this.state.knowledgeList} //数据
          onChange={this.handleChange}
          // pagination={{
          //   // 分页
          //   total: this.state.total,
          //   pageSize: this.state.pageSize, // 显示几条一页
          //   defaultPageSize: this.state.page, // 当前页
          //   showSizeChanger: true, // 是否显示可以设置几条一页的选项
          //   showQuickJumper: true,
          //   onChange: this.onChangeA,
          //   onShowSizeChange: this.onShowSizeChangeA,
          // }}
          pagination={false}
        />
        <Pagination
          style={{ textAlign: 'center', marginTop: 20}}
          total={this.state.total}
          pageSize={this.state.pageSize} // 显示几条一页
          current={this.state.page} // 当前页
          showSizeChanger={true} // 是否显示可以设置几条一页的选项
          onChange={this.onChangeA}
          onShowSizeChange={this.onShowSizeChangeA}
          showTotal={() => `共 ${this.state.total} 条`}
        />
      </Spin>
    );
  };

  render() {
    return (
      <Suspense fallback={<PageLoading />}>
        <div style={{ margin: 10 }}>
          <p className="pageTitle">知识库分享</p>
          <div className={styles.fromColumn}>
            <div className="zdyButtonA">
              <img style={{cursor:'pointer',position:'relative',right:8}} onClick={this.enumeration} src={addShare} />
              {/* <Button onClick={this.enumeration} type="primary" icon="plus">
                <FormattedMessage id="app.knowledgeBaseSharing.addKnowledge" defaultMessage="add" />
              </Button> */}
            </div>
          </div>
          {this.lessdata()}
        </div>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(KnowledgeBaseSharingNew));
